/* 
  目标：案例-评论列表
  1. 渲染列表✅
    1.1 在state中定义个list数组
    1.2 通过数组的map方法，生成多个li标签，标签里填上对应的内容
    1.3 li记得指定key

  2. 发表评论功能✅
    2.1 使用受控组件，收集用户输入的内容
    2.2 给发表按钮添加onClick事件，绑定对应的处理方法
    2.3 通过setState方法，来更新list
    2.4 边界处理：不能为空、清空内容

  3.删除一条评论 ✅
    3.1 给删除按钮绑定处理函数
    3.2 通过id，来删除list一条数据
    注意：React没有v-for的更新监测，一定不能通过直接修改list来更新，要通过setState
    推荐：
      1.先复制一份新的数组
      2. 在新数组中，调用splice方法去删除，不会影响state.list
      3. 再使用新的数组，更新list

  4. 清空评论列表功能 ✅
    4.1 给按钮绑定事件，对应的处理函数
    4.2 通过setState，去清空list数组
    4.3 通过三元运算符，来控制互斥显示
*/

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

class App extends React.Component {
  state = {
    // 1.1 在state中定义个list数组
    list: [
      {
        id: 1,
        username: '思聪',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '思聪2',
        content: '想你的夜2',
      },
      {
        id: 3,
        username: '思聪3',
        content: '想你的夜3',
      },
    ],
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
  };

  handleChange = (e) => {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  };

  handleAdd = (e) => {
    // button在表单中，默认是提交行为
    e.preventDefault();

    // 2.4 边界处理：不能为空、清空内容
    if (!this.state.username.trim() || !this.state.content.trim()) return alert('内容不能为空');

    //  2.3 通过setState方法，来更新list
    this.setState({
      list: [
        {
          id: Date.now(),
          username: this.state.username,
          content: this.state.content,
        },
        ...this.state.list,
      ],
      username: '',
      content: '',
    });
  };

  handleDelete = (id) => {
    // 通过id，来删除list一条数据
    // 通过id找到索引值
    const index = this.state.list.findIndex((item) => item.id === id);

    // 直接调用list.splice()，行不行？
    // this.state.list.splice(index, 1);

    // React中不能直接修改state中的数据，强制要求通过setState更新
    // 数组中会改变原始数据的方法，也不行，不像vue有v-for监测，React中没有这种东西

    // 推荐的做法
    // 1. 先复制一份新的数组
    const newList = this.state.list.slice();
    // 2. 在新数组中，调用splice方法去删除，不会影响state.list
    newList.splice(index, 1);

    console.log(newList, this.state.list, 'newList 和 旧list');
    // 3. 再使用新的数组，更新list
    this.setState({ list: newList });
  };

  handleClear = () => {
    // 4.2 通过setState，去清空list数组
    this.setState({ list: [] });
  };

  render() {
    return (
      <div className="app">
        {/* 表单提交的时候，运行发布评论的函数 */}
        <form onSubmit={this.handlePublish}>
          {/* 2.1 使用受控组件，收集用户输入的内容 */}
          <input
            value={this.state.username}
            name="username"
            onChange={this.handleChange}
            className="user"
            type="text"
            placeholder="请输入评论人"
          />
          <br />
          <textarea
            value={this.state.content}
            name="content"
            onChange={this.handleChange}
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
          />
          <br />
          {/* 2.2 给发表按钮添加onClick事件，绑定对应的处理方法 */}
          <button onClick={this.handleAdd}>发表评论</button>
          {/* 4.1 给按钮绑定事件，对应的处理函数 */}
          <button type="button" onClick={this.handleClear}>
            清空评论
          </button>
        </form>
        {/* 4.3 通过三元运算符 配合list.length，来控制互斥显示 */}
        {this.state.list.length ? (
          <ul>
            {/*  1.2 通过数组的map方法，生成多个li标签，标签里填上对应的内容 */}
            {this.state.list.map((item) => (
              //  1.3 li记得指定key
              <li key={item.id}>
                <h3>评论人: {item.username}</h3>
                <p>评论内容：{item.content}</p>
                {/* 3.1 给删除按钮绑定处理函数 */}
                <button onClick={() => this.handleDelete(item.id)}>删除</button>
              </li>
            ))}
          </ul>
        ) : (
          <div>暂无数据</div>
        )}
      </div>
    );
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'));
